﻿@model MusicStore.Models.Album

<div ng-controller="MusicStore.Admin.Catalog.AlbumEditController as viewModel">
    <h2>Album <small>{{ viewModel.mode | titlecase }}</small></h2>
    <hr />

    <alert ng-show="viewModel.alert" type="{{ viewModel.alert.type.value }}" close="viewModel.clearAlert()">
        {{ viewModel.alert.message }}
        <ul ng-show="viewModel.alert.modelErrors">
            <li ng-repeat="modelError in viewModel.alert.modelErrors">{{ modelError.ErrorMessage }}</li>
        </ul>
    </alert>
    
    <form name="editAlbum" class="form-horizontal" ng-submit="viewModel.save()" novalidate>
        <div class="form-group" ng-class="@Html.ngValidationClassFor(m => m.ArtistId, formName: "editAlbum", className: "has-error")">
            @Html.LabelFor(m => m.Artist, new { @class = "col-md-2 control-label" })
            <div class="col-md-10">
                <div class="row">
                    <div class="col-md-6">
                        @Html.ngDropDownListFor(m => m.ArtistId, m => m.Artist.Name, source: "viewModel.artists", nullOption: "-- choose Artist --",
                            htmlAttributes: new { @class = "form-control", ng_model = "viewModel.album.ArtistId", ng_disabled = "viewModel.disabled || viewModel.artists.length < 2" })
                    </div>
                </div>
                @Html.ngValidationMessageFor(m => m.ArtistId, "editAlbum", new { @class = "help-block field-validation-error" })
            </div>
        </div>

        <div class="form-group" ng-class="@Html.ngValidationClassFor(m => m.GenreId, formName: "editAlbum", className: "has-error")">
            @Html.LabelFor(m => m.Genre, new { @class = "col-md-2 control-label" })
            <div class="col-md-10">
                <div class="row">
                    <div class="col-md-6">
                        @Html.ngDropDownListFor(m => m.GenreId, m => m.Genre.Name, source: "viewModel.genres", nullOption: "-- choose Genre --",
                            htmlAttributes: new { @class = "form-control", ng_model = "viewModel.album.GenreId", ng_disabled = "viewModel.disabled || viewModel.genres.length < 2" })
                    </div>
                </div>
                @Html.ngValidationMessageFor(m => m.GenreId, "editAlbum", new { @class = "help-block field-validation-error" })
            </div>
        </div>

        <div class="form-group" ng-class="@Html.ngValidationClassFor(m => m.Title, formName: "editAlbum", className: "has-error")">
            @Html.LabelFor(m => m.Title, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <div class="row">
                    <div class="col-md-6">
                        @Html.ngTextBoxFor(m => m.Title, new { @class = "form-control", ng_model = "viewModel.album.Title", ng_disabled = "viewModel.disabled" })
                    </div>
                </div>
                @Html.ngValidationMessageFor(model => model.Title, "editAlbum", new { @class = "help-block field-validation-error" })
            </div>
        </div>

        <div class="form-group" ng-class="@Html.ngValidationClassFor(m => m.Price, formName: "editAlbum", className: "has-error")">
            @Html.LabelFor(m => m.Price, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <div class="row">
                    <div class="col-md-2">
                        <div class="input-group">
                            <span class="input-group-addon">$</span>
                            @Html.ngTextBoxFor(m => m.Price, new { @class = "form-control", ng_model = "viewModel.album.Price", ng_disabled = "viewModel.disabled" })
                        </div>
                    </div>
                </div>
                @Html.ngValidationMessageFor(model => model.Price, "editAlbum", new { @class = "help-block field-validation-error" })
            </div>
        </div>

        <div class="form-group" ng-class="@Html.ngValidationClassFor(m => m.AlbumArtUrl, formName: "editAlbum", className: "has-error")">
            @Html.LabelFor(m => m.AlbumArtUrl, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <div class="row">
                    <div class="col-md-10">
                        @Html.ngTextBoxFor(m => m.AlbumArtUrl, new { @class = "form-control", ng_model = "viewModel.album.AlbumArtUrl", ng_disabled = "viewModel.disabled" })
                    </div>
                </div>
                @Html.ngValidationMessageFor(model => model.AlbumArtUrl, "editAlbum", new { @class = "field-validation-error" })
            </div>
        </div>

        <div class="form-group" ng-show="viewModel.album.AlbumArtUrl && !editAlbum.AlbumArtUrl.$invalid">
            <div class="col-md-offset-2 col-md-10">
                <img ng-src="{{ viewModel.album.AlbumArtUrl }}" alt="Album Art" />
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <button type="submit" class="btn btn-primary"
                        ng-disabled="viewModel.disabled || !viewModel.album || editAlbum.$invalid">
                    Save
                </button>
                <button type="button" class="btn btn-danger"
                        ng-click="viewModel.deleteAlbum()"
                        ng-show="viewModel.mode === 'edit'">Delete</button>
                <a class="btn btn-default" ng-href="#/albums">Back to List</a>
            </div>
        </div>
    </form>
</div>